<template>
  <section class="todoapp">
    <!-- 头部部分 -->
    <HeaDerVue @fn="fn"></HeaDerVue>
    <!-- 主体部分 -->
    <MainInVue :list="list" @info="info" @fn1="fn1"></MainInVue>
    <!-- 底部部分 -->
    <FooTerVue :list="list" @num="num" @num1="num1" @num2="num2"></FooTerVue>
  </section>
</template>

<script>
import FooTerVue from './components/FooTer.vue'
import HeaDerVue from './components/HeaDer.vue'
import MainInVue from './components/MainIn.vue'

export default {
  data () {
    return {
      list: [
        {
          id: 1,
          name: '杰哥',
          isdone: true
        },
        {
          id: 2,
          name: '婷姐',
          isdone: false
        }
      ]
    }
  },
  components: {
    FooTerVue,
    HeaDerVue,
    MainInVue
  },
  methods: {
    fn (value) {
      const obj = {
        id: this.list.length + 1,
        name: value,
        isdone: false
      }
      this.list.push(obj)
    },
    info (id) {
      this.list = this.list.filter(item => {
        return item.id !== id
      })
    },
    fn1 (id) {
      const res = this.list.find(item => {
        return item.id === id
      })
      res.isdone = !res.isdone
    },
    num () {
      this.list = this.list.filter(item => item.isdone !== true)
    },
    num1 () {
      this.list = this.list.filter(item => item.isdone === false)
    },
    num2 () {
      this.list = this.list.filter(item => item.isdone === true)
    }
  }
}
</script>

<style></style>
